<template>
  <div>
    <view class="Rboy-box">
      <view class="Rboy-obverse" @click.stop="obverse_btn">
        <image class="obverseimg" :src="obverseUrl" v-if="obverseUrl" mode="">
        </image>
        <view
          style="
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          "
          v-else
        >
          <uni-icons type="camera" size="30" color="#00000060"></uni-icons>
          <text style="color: #00000060; margin-top: 10rpx; font-size: 14px">{{
            title
          }}</text>
        </view>
        <image
          class="del_btn"
          :src="del"
          mode=""
          v-if="obverseUrl && !disabled"
          @click.native.stop="del_btn('obverse')"
        ></image>
      </view>
    </view>
  </div>
</template>

<script>
import file from "./file.js";
import { api } from "@/utils/api.js";
export default {
  name: "Rboy-upload-sfz",
  props: {
    // 正面
    obverseUrl: {
      type: String,
      default: "",
    },
    // album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
    sourceType: {
      type: Array || Object,
      default: () => {
        return ["album", "camera"];
      },
    },
    title: {
      type: String,
      default: "点击上传照片",
    },
    fileType: {
      type: String,
      default: "1",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      del: file.del,
    };
  },
  created() {},
  methods: {
    obverse_btn() {
      if (this.obverseUrl) {
        // 预览
        this.previewImage(this.obverseUrl);
      } else {
        // 上传
        if (this.disabled) {
          return;
        }
        this.select_change("obverse");
      }
    },
    // 上传
    select_change(name) {
      let that = this;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: this.sourceType, // 从相册选择
        success: async (res) => { 
          let ress = await api.upload({
            url: res.tempFilePaths[0],
            data: { fileType: that.fileType },
          });
          that.$emit("selectChange", {
            tempFilePath: res.tempFilePaths[0],
            fileId: ress.data.fileId,
          });
        },
      });
    },
    // 预览
    previewImage(current = 0) {
      uni.previewImage({
        current,
        urls: [this.obverseUrl],
      });
    },
    // 删除
    del_btn(name) {
      console.log(name);
      this.$emit("del", {
        name,
      });
    },
  },
};
</script>

<style scoped lang="less">
@imgWidth: 330rpx;
@imgheight: 212rpx;
@boxheight: 212rpx;

.Rboy-box {
  display: flex;
  justify-content: space-between;
  // align-items: center;

  .Rboy-obverse {
    border-radius: 10rpx;
    width: @imgWidth;
    height: @boxheight;
    border: 1px dashed #00000060;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;

    .obverseimg {
      width: @imgWidth;
      height: @imgheight;
    }

    .bottom {
      text-align: center;
      height: calc(@boxheight - @imgheight);
      background-color: #b7d7ff;
      color: #3b5fd2;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .del_btn {
      position: absolute;
      top: 5rpx;
      right: 5rpx;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      z-index: 20;
    }
  }

  .Rboy-reverse {
    border-radius: 10rpx;
    width: @imgWidth;
    height: @boxheight;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;

    .reverseimg {
      width: @imgWidth;
      height: @imgheight;
    }

    .bottom {
      text-align: center;
      height: calc(@boxheight - @imgheight);
      background-color: #b7d7ff;
      color: #3b5fd2;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .del_btn {
      position: absolute;
      top: 5rpx;
      right: 5rpx;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      z-index: 20;
    }
  }
}
</style>
